<template>
  <el-dialog :visible.sync="dialogVisible" @close="close">
    <div slot="title">{{ info.modalType === 1 ? "新增" : "编辑" }}</div>
    <el-form
      hide-required-asterisk
      :model="refFormData"
      label-width="80px"
      class="label-row"
      :rules="rules"
      ref="refForm"
    >
      <el-form-item prop="key" label="名称">
        <el-input
          clearable
          size="small"
          autofocus
          v-model="refFormData.key"
          placeholder="名称"
        ></el-input>
      </el-form-item>

      <el-form-item prop="value" label="内容"  :class="{'upload-txt': info.attr === 'display'}">
        <el-input
          clearable
          size="small"
          autofocus
          v-model="refFormData.value"
          :placeholder="info.attr === 'display' ? '内容' : '以#为分隔符' "
        ></el-input>
        <el-upload
          v-if="info.attr === 'display'"
          action="#"
          accept="image/*"
          :show-file-list="false"
          :http-request="uploadFile">
          <el-button size="small" type="primary" class="upload-btn">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item  prop="seq" label="序号">
        <el-input
          clearable
          size="small"
          autofocus
          v-model="refFormData.seq"
          placeholder="序号"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="warning" @click="close()">取消</el-button>
      <el-button type="success" @click="submit('refForm')">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "dialogBox",
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
    product_id: "",
  },
  data() {
    return {
      dialogVisible: true,
      refFormData: {
        key: "",
        value: "",
      },
      rules: {
        key: [
          { required: true, message: "必填", trigger: "blur" },
        ],
        value: [
          { required: true, message: "必填", trigger: "blur" },
        ],
      },
      list: [],
      fileList: [],
    };
  },
  mounted() {
    this.refFormData = {
      ...this.info,
    };
    console.log(this.refFormData);
  },
  methods: {
    /**
     * @Desc 数据提交
     * */
    async submit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return;
        const { key, value, seq, attri_id } = this.refFormData;
        const params = {
          type: this.info.attr === "attr" ? 0 : 1,
          key,
          value,
          attri_id,
        };
        if (this.product_id) params.product_id = +this.product_id;
        if (seq) params.seq = +seq;
        console.log(params);
        const { data } = await this.$api.product[
          this.info.modalType === 1 ? "attributeAdd" : "attributeUpdate"
        ](params);
        const { code } = data;
        if (code !== 200) return this.$message.warning("数据不合法");
        this.$emit("getList");
        this.close();
      });
    },

    /**
     * @Desc 关闭
     * @params {String}
     * @return {Object}
     * */
    close() {
      this.$emit("close");
    },

    /*
    * @Desc: 上传
    * @params: {String}
    * @return: {Object}
    */
    async uploadFile(fileInfo) {
      const { data } = await this.$api.product.upload(fileInfo.file);
      if(data.code === 200) {
        this.refFormData.value = data.data[0]
        this.$forceUpdate()
      }
    },
  }
};
</script>

<style lang="less" scoped>
/deep/.el-form-item{
  margin-bottom: 16px!important;
  // display: flex;
  // .el-form-item__content{
  //   flex: 1;
  //   display: inline-flex;
  //   margin-left: 6px!important;
  // }
  &.upload-txt {
   .el-form-item__content {
      display: flex;
    }
    .el-input{
      flex: 1;
    }
  }
}
.upload-btn{
  height: 36px;
  margin-left: 4px;
}
</style>
